<template>
  <div class="mt10">
    <div class="clearfix">
      <span class="mr10">相似宝贝定向</span>
      <span class="s_fc_9 mr10" style="max-width: 76%;" title="近期对指定宝贝的竞品宝贝感兴趣的人群">近期对指定宝贝的竞品宝贝感兴趣的人群</span>
      <el-button @click.native="similarShowModal" type="text">设置定向</el-button>
      <div class="popup">
        <el-dialog
          title="相似宝贝定向 "
          :visible.sync="similarDialog"
          :close-on-click-modal="false"
          width="998px">
          <div style="height:auto;" class="slotContent">
            <div class="pl40 pt20">
              <div class="mb10 clearfix">
                <div class="fl number-style mr10">1<span class="number-line"></span></div>
                <div class="fl s_fs_15">选择定向人群</div>
              </div>
              <div class="pl40 mb25">
                <el-checkbox-group v-model="checkedPeople">
                  <el-checkbox label="131072">喜欢相似宝贝的人群</el-checkbox>
                  <el-checkbox label="262144">喜欢我的宝贝的人群</el-checkbox>
                </el-checkbox-group>
              </div>
              <div class="clearfix mb20">
                <div class="fl number-style second-number-style mr10 mt4">2<span class="number-line"></span></div>
                <div class="searchbox fl">
                  <i class="el-icon-search" @click="searchLabels"></i>
                  <input class="input w200" placeholder="宝贝名称" v-model="Tips">
                </div>
              </div>
            </div>
            <div class="elTable" v-show="checkedPeople.length">
              <el-table
                ref="singleTable"
                :data="labels"
                :max-height="460"
                style="width: 100%;"
              >
                <el-table-column
                  label="宝贝信息"
                  style="width: 100%;">
                  <template slot-scope="scope">
                    <el-radio v-model="similar" :label="scope.row.item_id" style="width:22px;" class="similarTem"> </el-radio>
                    <img :src="scope.row.item_pic_url" alt="" class="similarImg">
                    <span>{{scope.row.item_name}}</span>
                  </template>
                </el-table-column>
              </el-table>
              <div id="pages" class="pagination clearfix">
                <el-pagination
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :background="true"
                  :page-size="pageSize"
                  layout="total, prev, pager, next, jumper"
                  :total="totalPage">
                </el-pagination>
              </div>
            </div>

          </div>
          <span slot="footer" class="dialog-footer slotFooter">
            <a href="javascript:;" class="warning" v-show="warning4">
              <i class="el-icon-warning"></i>
              请至少选择一个子标签
            </a>
            <el-button @click="similarDialog=false" size="small">取 消</el-button>
            <el-button type="primary" @click="similarConfirm"  size="small">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    props:{
      similarMsg:Array
    },
    data() {
      return {
        similarDialog: false,
        labels: [],
        checkedPeople:['131072','262144'],
        Tips:'',
        similar:-1,
        similarObject:{},
        similarList:[],//传给index页面的值
        currentRow:0,
        currentPage: 1,
        totalPage: 0,
        pageSize: 20,
        warning4: false
      }
    },
    created() {
      this._getTip(this.currentPage,this.pageSize);
    },
    methods: {
      similarShowModal() {//设置类目型定向

        if(this.similarMsg.length){
          this.similarList=this.similarMsg;

        }
        this.checkedPeople=[];
        if(this.similarList.length==0){
          this.similarObject=this.labels[0];
          this.similar = this.labels[0].item_id;
          this.checkedPeople=['131072','262144'];
        }else{

          for (var i = 0; i < this.similarList.length; i++) {
            this.checkedPeople.push(this.similarList[i].id);

          }
          this.similar = this.similarList[0].item_id;
        }
        this.similarDialog = true;
        this.warning4 = false;
      },
      _getTip(currentPage,pageSize,item_name) {//加载标签
        this.$http.get('/zuanzhan/crowd/shop-item',{
          params:{
            page_num:currentPage,
            page_size:pageSize,
            item_name:item_name
          }
        }).then((res) => {
          console.log(res.data);
          if (res.data.code == 200) {
            let data = res.data;
            this.labels = data.data.list;
            this.totalPage = data.data.total_count;
            this.similar=this.labels[0].item_id;//radio默认选中第一行
          }
        }).catch((error) => {
          console.log(error);
        });
      },
      getTip(currentPage,pageSize,item_name) {//加载标签，但是不设置默认第一个选中
        this.$http.get('/zuanzhan/crowd/shop-item',{
          params:{
            page_num:currentPage,
            page_size:pageSize,
            item_name:item_name
          }
        }).then((res) => {
//          console.log(res.data);
          if (res.data.code == 200) {
            let data = res.data;
            this.labels = data.data.list;
            this.totalPage = data.data.total_count;
          }
        }).catch((error) => {
          console.log(error);
        });
      },
      searchLabels(){//搜索
        this.getTip(this.currentPage,this.pageSize,this.Tips);
      },
      handleCurrentChange(val) {//currentPage 改变时会触发
        this.currentPage = val;
        this.getTip(this.currentPage,this.pageSize,this.Tips);
      },
      similarConfirm() {//相似宝贝定向的确认
        //这里要判断两个CheckBox的值是不是为空
        if (!this.checkedPeople.length) {
          this.warning4 = true;
        } else if(!this.similar){
          this.warning4 = true;
        }else{
          let findIndex = this.labels.findIndex(item=>item.item_id === this.similar);
          if(findIndex!=-1){
            this.similarObject = this.labels[findIndex];
          }
          this.similarList=[];//这里不加有bug
          for (var i = 0; i < this.checkedPeople.length; i++) {
            this.similarList[i]=Object.assign({},this.similarObject,{id:this.checkedPeople[i],type:this.checkedPeople[i]=='131072'?'喜欢相似宝贝的人群':'喜欢我的宝贝的人群'});
            if(!this.similarList[i].matrix_price){//an如果没有值才赋为空
              this.similarList[i].matrix_price = {};
            }
          }
          this.$emit("similarData",this.similarList);//传给父组件
          this.similarDialog = false;
        }
      }
    }
  }
</script>
<style>
  .similarTem .el-radio__label{
    color: transparent!important;
  }
</style>
<style scoped lang="stylus">
  .slotContent
    border-top: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
    padding: 0 40px 15px;
    .pl40
      padding-left: 40px;
    .pt20
      padding-top: 20px;
      .mr10
        margin-right: 10px;
        .s_fs_15
          font-size: 15px;
      .pl40
        padding-left: 40px;
      .mb25
        margin-bottom: 25px;
        .mr30
          margin-right: 30px;
          .mr5
            margin-right: 5px;
      .mb20
        margin-bottom: 20px;
        .mr10
          margin-right: 10px;
        .mt4
          margin-top: 4px;
      .searchbox
        position: relative;
        .el-icon-search
          position: absolute;
          left: 8px;
          top: 6px;
          font-size: 18px;
          color: #999;
        input
          width: 100%;
          padding-left: 30px;

  .number-style
    position: relative;
    width: 25px;
    height: 25px;
    line-height: 25px;
    background-color: #eee;
    border-radius: 50%;
    text-align: center;
    color: #999;
    .number-line
      position: absolute;
      top: 25px;
      left: 50%;
      width: 0;
      height: 65px;
      border-left: 1px solid #eee;

  .elTable
    .similarImg
      width: 70px;
      height: 70px;
      margin-right:20px;

  .warning
    color: #a40100;
    margin-right: 15px;

</style>

